import React, { Component } from 'react'
// 要限制传输数据类型 必须引入此库
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		// 设定必须传值
		todos: PropTypes.array.isRequired,
		updateTodo: PropTypes.func.isRequired,
		deleteTodo: PropTypes.func.isRequired,
	}

	render() {//从父类传入的props中找到组件
		const { todos, updateTodo, deleteTodo } = this.props
		return (
			<ul className="todo-main">
				{
					todos.map(todo => {//遍历todos获取到App组件内的自定义状态
						return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo} />//...todo为将todo内所有信息传递
					})
				}
			</ul>
		)
	}
}